<script setup lang="ts">
import {
  createFromIconfontCN,
  EllipsisOutlined,
  HeartOutlined,
  PlusOutlined,
  CheckOutlined,
  TeamOutlined
} from "@ant-design/icons-vue";
import _ from "lodash";
import {computed, onMounted, ref, watch} from "vue";
import {userCenterSysConfig} from "@/util/userCenterUtil";
import {useSystemDictStore} from "@/store/system/systemDictStore";
import {ECode, iconFontAddress} from "@/util/commonUtil";
import {cookieToken} from "@/config/CookieConfig";
import {getCookie} from "@/util/cookieUtil";
import {message} from "ant-design-vue";
import {loginConfigStore} from "@/store/user/loginConfigStore";
import {v4 as uuidV4} from 'uuid';
import {addUserWatch, checkCurrentUserWatch, deleteUserWatch} from "@/api/user/user";
import {userConfigStore} from "@/store/user/userConfigStore";

const userBackgroundImages = ref<any>(userCenterSysConfig.defaultBackgroundImages)
const userTagDictList: any = computed(() => useSystemDictStore().SysUserTag)
const userLevelDictList: any = computed(() => useSystemDictStore().SysUserLevel)
const IconFont = createFromIconfontCN({
  scriptUrl: iconFontAddress,
});
const emit = defineEmits(['isWatchUser', 'unWatchUser']);
const props = defineProps({
  userInfo: {
    type: Object,
    default: () => ({})
  },
  userLevelImage: {
    type: String,
    default: () => ''
  },
  adminUid: {
    type: String,
    default: () => ''
  },
  userUid: {
    type: String,
    default: () => ''
  },
  loginUserInfo: {
    type: Object,
    default: () => ({})
  }
});
const userWatchStatus = ref<number>(0)
onMounted(() => {
  getCheckCurrentUserWatch(props.userUid)
})
watch(() => userConfigStore().userInfo, () => {
  getCheckCurrentUserWatch(props.userUid)
})

function getTagName(tagId: string) {
  if (_.isEmpty(userTagDictList.value)) {
    return;
  }
  return userTagDictList.value.find((item: any) => item.dictValue == tagId)?.dictLabel
}

function getLvName(level: any) {
  if (_.isEmpty(userLevelDictList.value)) {
    return;
  }
  return userLevelDictList.value.find((item: any) => item.dictValue == level)?.remark;
}

// 关注用户
function watchUser() {
  let isLogin = getCookie(cookieToken)
  if (!isLogin) {
    message.warning('登录后才可以关注哦~')
    // 未登录，自动弹出登录框
    loginConfigStore().setLoginMessage(uuidV4())
    return;
  }
  let params: any = {}
  if (props.adminUid) {
    params.toUserUid = props.adminUid
    params.isAdmin = "1"
  } else if (props.userUid) {
    params.toUserUid = props.userUid
    params.isAdmin = "0"
  }
  addUserWatch(params).then((response: any) => {
    if (response.code == ECode.SUCCESS) {
      message.success(response.message)
      emit('isWatchUser', true)
    } else {
      message.error(response.message)
    }
  })
}

function unWatchUser() {
  let isLogin = getCookie(cookieToken)
  if (!isLogin) {
    message.warning('登录后才可以关注哦~')
    // 未登录，自动弹出登录框
    loginConfigStore().setLoginMessage(uuidV4())
    return;
  }
  let params: any = {}
  if (props.adminUid) {
    params.toUserUid = props.adminUid
    params.isAdmin = "1"
  } else if (props.userUid) {
    params.toUserUid = props.userUid
    params.isAdmin = "0"
  }
  deleteUserWatch(params).then((response: any) => {
    if (response.code == ECode.SUCCESS) {
      message.success(response.message)
      emit('unWatchUser', false)
    } else {
      message.error(response.message)
    }
  })
}

function contactButton() {
  message.warning('功能暂未适配！')
}

//获取用户关注的状态
function getCheckCurrentUserWatch(uid: any) {
  let isLogin = getCookie(cookieToken)
  if (!isLogin) {
    return
  }
  let params: any = {}
  params.toUserUid = uid
  checkCurrentUserWatch(params).then((response: any) => {
    if (response.code == ECode.SUCCESS) {
      userWatchStatus.value = response.data
    }
  })
}
</script>

<template>
  <header class="authorHeader rounded-xl w-full mb-5">
    <div class="pageCover relative overflow-hidden h-[320px]">
      <img :src="userBackgroundImages" alt="userBackgroundImages"
           class="absolute h-full w-full rounded-xl overflow-hidden">
      <div class="absolute h-full w-full top-0 bottom-0 left-0 right-0 linear-mask"></div>
      <!-- todo 背景操作 -->
      <div class="absolute w-full text-right bottom-0 right-4" v-if="loginUserInfo.uid == userUid">
        <EllipsisOutlined class="text-white cursor-pointer"/>
      </div>
    </div>
    <div class="headerContent pt-[18px] pb-[18px] pl-[42px] pr-[42px]">
      <div class="flex headerInfo relative flex-wrap">
        <!-- 头部头像 -->
        <div class="flex-none headerAvatar -mt-20 mr-5">
          <div class="inline-flex w-[140px] h-[140px] relative">
            <img class="avatarImg" :src="userInfo.photoUrl" :alt="userInfo.nickName" v-lazy="userInfo.photoUrl"/>
          </div>
        </div>
        <!-- 头部左侧信息 -->
        <div class="flex-[1] overflow-hidden headerUserInfo">
          <div class="text-[1.2em]">
            <div class="flex items-center overflow-hidden">
              <span class="cursor-pointer text-[20px] font-bold flex items-center">
                <img class="inline-flex h-6 mr-1 w-auto" src="@/assets/vip/vip.svg" alt="vipBadge"
                     v-if="userInfo.userTag > 0" title="会员">
                {{ userInfo.nickName }}
              </span>
              <span class="inline-flex h-6 ml-2 w-auto">
                  <IconFont type="icon-nanxing" class="text-base" v-if="userInfo.gender == '1'"/>
                  <IconFont type="icon-nv" class="text-base" v-else-if="userInfo.gender == '2'"/>
                  <IconFont type="icon-nannv" class="text-base" v-else/>
                </span>
              <img class="inline-flex h-6 ml-2 w-auto" :src="userLevelImage" alt="userLevelImage">
            </div>
          </div>
          <div class="userIdentity flex flex-wrap gap-1 items-center mt-1 pt-0.5 pb-0.5 cursor-pointer">
            <a-tag class="text-[14px] inline-flex" color="blue" v-if="userInfo.userMedalCount > 0">
              <template #icon v-if="userInfo.userMedalCount <= 2">
                <template v-for="(medal) in userInfo.userMedalList" :key="medal.uid">
                  <img :src="medal.fileUrl" :alt="medal.name" class="h-5" data-fancybox="gallery"
                       :data-caption="medal.name">
                </template>
              </template>
              {{ userInfo.userMedalCount }}枚勋章
            </a-tag>
            <a-tag class="text-[14px]" color="cyan" v-if="userInfo.occupation"> {{ userInfo.occupation }}</a-tag>
            <a-tag color="red">
              <template #icon>
                <a-tooltip>
                  <template #title>
                    官方认证
                  </template>
                  <IconFont type="icon-renzheng" class="text-[14px]"/>
                </a-tooltip>
              </template>
              {{ getTagName(userInfo.userTag) }}
            </a-tag>
            <a-tag color="purple">
              <a-tooltip>
                <template #title>
                  等级称号
                </template>
                {{ getLvName(userInfo.userLevel) }}
              </a-tooltip>
            </a-tag>
            <a-tag>{{ userInfo.userIpPossession }}</a-tag>
          </div>
          <div class="mt-1.5 text-[14px] text-gray-400 max-w-[520px] line-clamp-1" v-if="userInfo.summary">
            <a-tooltip>
              <template #title>
                {{ userInfo.summary }}
              </template>
              {{ userInfo.summary }}
            </a-tooltip>
          </div>
          <div class="mt-1.5 text-[14px] text-gray-400 max-w-[520px]" v-else>这家伙很懒，什么都没有写...</div>
        </div>
        <!-- 头部右侧操作 -->
        <div class="headerBtn flex-none flex items-center gap-4">
          <div class="userWatch" v-if="loginUserInfo.uid != userUid">
            <a-button type="primary" class="flex items-center justify-center" @click="watchUser"
                      v-if="userWatchStatus == 0">
              <PlusOutlined/>
              关注
            </a-button>
            <a-button type="primary" class="flex items-center justify-center" v-if="userWatchStatus == 1"
                      @click="unWatchUser">
              <CheckOutlined/>
              已关注
            </a-button>
            <a-button type="primary" class="flex items-center justify-center" v-if="userWatchStatus == 2"
                      @click="unWatchUser">
              <TeamOutlined/>
              相互关注
            </a-button>
          </div>
          <a-button danger class="flex items-center justify-center" @click="contactButton">
            <HeartOutlined/>
            私信
          </a-button>
        </div>
      </div>
    </div>
  </header>
</template>

<style scoped lang="less">
:deep(.ant-tag >.anticon+span) {
  margin-inline-start: 0;
}

.authorHeader {
  border: thin solid rgb(203 213 225);
}

.linear-mask {
  background-image: linear-gradient(0deg, rgba(29, 41, 49, .4) 3em, rgba(255, 255, 255, 0) 8em);
}

.authorHeader .avatarImg {
  border-radius: 6px;
  border: 4px solid #FFF;
}

@media (max-width: 768px) {
  .headerInfo {
    flex-direction: column;
    gap: 1rem;
  }

  .headerUserInfo {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
  }
}
</style>
